<template>
  <div class="app">
    <mu-row>
      <mu-col width="100" tablet="100" desktop="100">
        <router-view></router-view>
        <mu-tabs class="tabs" :value="activeTab" @change="handleTabChange">
          <mu-tab value="order" title="下单"/>
          <mu-tab value="query" title="查单"/>
        </mu-tabs>
      </mu-col>
    </mu-row>

  </div>

</template>

<script>

  export default {
    name: "Main",
    data() {
      return {
        activeTab: 'order',
      }
    },
    methods: {
      handleTabChange(value) {
        console.log(value)
        this.activeTab = value
        this.$router.push({name: value})
      }
    }
  }
</script>

<style scoped>

  .row .desktop-50 {

    /*display: flex;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);*/
  }
  @media (min-width: 993px) {
    body {
      /*background-color: #b9ff60;*/
      background: url(../images/bg.jpg) no-repeat center center fixed;
      background-size: cover;
    }

  }

  .app {
    height: 100%;
    overflow: auto;
    background: rgb(211, 168, 9);
  }

  .tabs {
    position: fixed;
    bottom: 0px;
  }

  .mu-tabs {
    background-color: #626254;

  }
</style>
